<template>
	<view class="">
		<view class="header flex-column align-center justify-center">
			<u-avatar :url="$userInfo.avatar" size="60"></u-avatar>
			<view class="mt-30 name">
				<template v-if="isLogin">
					{{$userInfo.nickname}}
				</template>
				<view @click="jumpPage('')" v-else>
					登录授权
				</view>
			</view>
		</view>
		<view class="content p-30">
			<view class="flex-row align-center justify-between ">
				<navigator url="/pages/home/user" class="card flex-column align-center justify-center flex-sub p-30">
					<view class="fw-700">{{usernum}}</view>
					<view class="mt-10 sub-size">我的客户</view>
				</navigator>
				<view class="ml-30"></view>
				<navigator url="/pages/home/commission"
					class="card flex-column align-center justify-center flex-sub p-30">
					<view class="fw-700">{{commissionmony}}</view>
					<view class="mt-10 sub-size">我的佣金</view>
				</navigator>
			</view>
			<view class="card flex-row justify-between mt-30 p-30">
				<view v-for="item in navData" @click="jumpPage(item.path)"
					class="flex-sub flex-column align-center justify-center">
					<image :src="item.img" style="width: 50rpx;height: 50rpx;" mode="widthFix"></image>
					<view class="mt-10">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<login ref="login" />
		<page-tabbar :value="1" />
	</view>
</template>

<script>
	import {
		mine
	} from '@/common/api.js'
	import {
		mapState
	} from "vuex";
	import commonMixin from '@/mixins/common.js';
	export default {
		mixins: [commonMixin],
		data() {
			return {
				navData: [{
						'name': "申请渠道",
						'img': "/static/img/apply.png",
						'path': "/pages/home/apply"
					},
					{
						'name': "我的海报",
						'img': "/static/img/share.png",
						'path': "/pages/home/poster"
					}, {
						'name': "帮助中心",
						'img': "/static/img/fs.png",
						'path': "/pages/home/help"
					}, {
						'name': "关于我们",
						'img': "/static/img/about.png",
						'path': ""
					}
				],
				
				usernum:0,
				commissionmony:0
			}
		},
		onShow() {
			this.$store.dispatch('getUserInfo');
			this.intData()
		},
		onLoad(e) {
			
		},
		methods: {
			intData() {
				mine().then(res => {
					console.log('res', res);
					this.commissionmony = res.commissionmony
					this.usernum = res.usernum
				})
			}

		}
	}
</script>


<style>
	.header {
		background: url('') no-repeat;
		background-size: 100% 100%;
		height: 500rpx;
	}

	.name {
		color: #fff;
	}

	.content {
		background-color: #f5f5f5;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		margin-top: -60rpx;
	}
</style>